<template>
  <div class="sdy-list">
    <Teleport to=".header">
      <header-com :str="keyword"></header-com>
    </Teleport>

    <div class="goods-list">
      <div
        v-for="item in goodsList"
        :key="item.proid"
        class="goods-list-item">
        <van-card
          num="1"
          :price="item.originprice.toFixed(2)"
          desc="描述信息"
          title="商品标题"
          :thumb="item.img1" >
          <template #tags>
            <van-tag plain type="primary">{{ item.brand }}</van-tag>
            <van-tag plain type="primary">{{ item.category }}</van-tag>
          </template>
          <template #footer>
            <van-button @click="addCartHandler(item.proid)" size="mini">加入购物车</van-button>
            <van-button @click="goToInfoHandler(item.proid)" size="mini">查看商品详情</van-button>
          </template>
        </van-card>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import HeaderCom from '@/components/header.vue'
import { onMounted, ref } from 'vue'
import { getSearchList } from '@/apis/goods'
import { addCart } from '@/apis/carts'
import { showFailToast, showSuccessToast } from 'vant'
import { useRouter } from 'vue-router'

const $router = useRouter()

interface Goods {
  img1: string
  proid: string
  category: string
  brand: string
  originprice: number
}

// 第一件事拿到 localStorage 内的 history 的 [0] 数据
//   这个数据有可能没有
//   如果没有, 自己编造一个关键字

// 准备一个变量, 表示当前列表页关键字
const keyword = ref<string>('电脑')

// 获取 localStorage 内数据的方法
const getKeyword = () => {
  const list = JSON.parse(window.localStorage.getItem('history') || '[]')

  // 当 list[0] 有内容的时候, 才给 keyword 赋值
  if (list[0]) keyword.value = list[0]
}

// 根据关键字获取商品列表
// 准备一个数据, 表示商品列表
const goodsList = ref<Goods[]>([])

// 获取商品列表数据
const getGoods = async () => {
  const res = await getSearchList(keyword.value)
  goodsList.value = res.data
  console.log(res.data)
}

// 加入购物车操作
const addCartHandler = async (proid: string) => {
  // 判断一下登录状态
  const userid = window.localStorage.getItem('user_id')

  if (!userid) {
    showFailToast('您还没有登录')
    return
  }

  // 代码到达这里, 说明已经登录了
  // 发送请求
  await addCart(userid, proid, 1)
  showSuccessToast('加入购物车成功')
}

// 跳转到详情页
const goToInfoHandler = (proid: string) => {
  $router.push({ path: '/detail', query: { proid } })
}

onMounted(() => {
  getKeyword()
  getGoods()
})
</script>

<style lang="scss" scoped>
.goods-list {
  padding: 10px;
  background-color: #fff;

  > .goods-list-item {
    border: 1px solid #ccc;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 10px;
    box-shadow: 1px 1px 10px 1px #ccc;
  }
}
</style>
